<div id="org_manager" style="width: 1100px;overflow-x: hidden">
    <div class="org_manager" style="position: relative;width: 1100px;overflow-x: hidden">
        <el-row class="table_search" style="position:fixed;left:220px;top:60px;z-index: 999;width: 1100px">
            <el-col :span="6">
                <el-input
                        :clearable="true"
                        id="searchName"
                        prefix-icon="el-icon-search"
                        placeholder="请输入关键字进行过滤"
                        v-model="filterText">
                </el-input>
            </el-col>
            <el-col :span="14" class="text-r">
                <el-button-group>
                    <el-button type="primary"
                               icon="el-icon-plus"
                               :disabled="addButton"
                               @click="add">新增</el-button>
                    <el-button type="warning"
                               icon="el-icon-plus"
                               :disabled="editButton"
                               @click="edit">修改</el-button>
                    <el-button type="danger"
                               icon="el-icon-plus"
                               :disabled="delButton"
                               @click="del">删除</el-button>
                    <el-button class="btn-export"
                               type="primary"
                               icon="el-icon-download"
                               @click="exportExcel">导出</el-button>
                </el-button-group>
            </el-col>
            <div style="position: absolute;left: 0;bottom: -10px;width: 101%;height: 10px;background-color: #f8f9fb"></div>
        </el-row>
        <el-tree
                class="filter-tree"
                node-key="id"
                ref="orgTree"
                :props="defaultProps"
                default-expanded-keys="[1]"
                :filter-node-method="filterNode"
                :data="treeData"
                empty-text="正在加载...."
                highlight-current="true"
                @current-change="nodeCheck"
                style="padding-top: 80px"
        >
        </el-tree>
    </div>
    <el-dialog :title="dialogTitle" :lock-scroll="lockBody" :close-on-click-modal="ismodalClose" :show-close="showDelBtn" :visible.sync="dialogFormVisible">
        <span class="delDialogBtn" @click="closeAddDialog">x</span>
        <el-form
                class="add-template-form"
                :rules="rules"
                ref="form"
                :model="form"
                label-width="200px">
            <el-form-item label="上级机构号：" prop="supbak" style="display: none;">
                <el-input v-model="form.supbak" disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="上级机构名称：" prop="supnam" v-if="form.supnam !=''">
                <el-input v-model="form.supnam" disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="机构号：" prop="orgId" style="display: none;">
                <el-input v-model="form.orgId" disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="机构名称：" prop="orgName">
                <el-input v-model="form.orgName"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitForm('form')">确 定</el-button>
        </div>
    </el-dialog>
</div>

<script>
    $(function () {
        placeHolde("#searchName","请输入关键字进行过滤");
    });
    //设置顶端盒子滚动页面时固定在顶部
//    var org = $("#org_manager");
//    if(org){
//        var mainWidth = $("#org_manager").width() - 20;
//        $(".org_manager .table_search").css({"position":"fixed","left":"220px","top":"60px","width":mainWidth,"zIndex":"999"});
//
//    }
//    window.onresize = function(){
//        var mainWidthChange = $("#org_manager").width();
//        $(".org_manager .table_search").css({"width":mainWidthChange});
//    };

    var layer,
        loadOrg;
    layui.use('layer', function(){
        layer = layui.layer;
        loadOrg  = layer.load(1, {shade: [0.5, '#000']});
    });

    var orgManager = new Vue({
        el: "#org_manager",
        data: {

            isShowingBox:false,
            showDelBtn:false,

            ismodalClose:false,
            lockBody:false,

            treeData:[],
            addButton:true,
            editButton:true,
            delButton:true,
            filterText:'',
            defaultProps: {
                children: 'children',
                label: 'label',
                isLeaf: 'leaf'
            },
            dialogTitle:'',
            dialogFormVisible:false,
            form: {
                supbak: '',
                supnam: '',
                orgId: '',
                orgName: ''
            },
            rules: {
                orgnam: [
                    {required: true, message: '请填写机构名称', trigger: 'blur'},
                    { max: 200, message: '长度在 200 个字符以内', trigger: 'blur' }
                ]
            }
        },
        methods: {
            backHome:function () {
                this.closeAddDialog();
                this.isShowingBox = false;
                this.dialogFormVisible = false;
            },
            /**
             * 点击X关闭模态框
             * */
            closeAddDialog:function () {
                this.isShowingBox = false;
                this.dialogFormVisible=false;
            },
            filterNode:function(value, data) {
                if (!value){
                    return true;
                }
                return data.label.indexOf(value) !== -1;
            },
            nodeCheck:function(data,node){
                if(data.level >=4){
                    orgManager.addButton=true;
                }else{
                    orgManager.addButton=false;
                }
                if(data.id != '1'){
                    orgManager.editButton=false;
                }else{
                    orgManager.editButton=true;
                }
                if(data.leaf){
                    orgManager.delButton=false;
                }else{
                    orgManager.delButton=true;
                }
            },
            add:function(){
                var parent = orgManager.$refs.orgTree.getCurrentNode();
                orgManager.form.supbak = parent.id;
                orgManager.form.supnam = parent.label;
                orgManager.form.orgId = '';
                orgManager.form.orgName = '';
                orgManager.dialogTitle = '添加机构';
                this.isShowingBox = true;
                orgManager.dialogFormVisible = true;
            },
            edit:function(){
                var node = orgManager.$refs.orgTree.getCurrentNode();
                var parent = orgManager.getNodeByKey(node.supbak);
                console.log(parent);
                orgManager.form.supbak = parent.key;
                orgManager.form.supnam = parent.label;
                orgManager.form.orgId = node.id;
                orgManager.form.orgName = node.label;
                orgManager.dialogTitle = '修改机构';
                this.isShowingBox = true;
                orgManager.dialogFormVisible = true;
            },
            del:function(){
                var msg = confirm('此操作将永久删除该机构信息, 是否继续?');
                if(msg){
                    var url = "${basePath}bank/org/del";
                    var options = {
                        'orgId': orgManager.$refs.orgTree.getCurrentNode().id
                    };
                    sendService(url, options, function (resData) {
                        if (resData.status == 'success') {
                            //orgManager.$message.success(resData.msg);
                            layer.msg(resData.msg, {icon: 6});
                            orgManager.goPage("/bank/org");
//
                        } else {
                            //orgManager.$message.error(resData.msg);
                            layer.msg(resData.msg, {icon: 5});
                        }
                    });
                }
            },
            goPage: function (url) {
                $(".main-right").empty();
                $(".main-right").load('${basePath}' + url);
            },
            exportExcel:function(){
                var url = "${basePath}bank/org/exportExcel";
                window.location.href = url;
            },
            getNodeByKey:function(id){
                var nodes = orgManager.$refs.orgTree.store.nodesMap;
                return nodes[id];
            },
            submitForm:function(formName) {
                this.$refs[formName].validate(
                    function (valid) {
                        if (valid) {
                            var url = "${basePath}bank/org/save";
                            var option = {
                                'orgId': orgManager.form.orgId,
                                'orgName': orgManager.form.orgName,
                                'supbak': orgManager.form.supbak
                            };
                            sendService(url, option, function (resData) {
                                orgManager.isShowingBox = true;
                                orgManager.dialogFormVisible = false;
                                if (resData.status == 'success') {

                                    var node = orgManager.$refs.orgTree.getCurrentNode();
//
                                    orgManager.goPage("/bank/org");
//                                    var node = orgManager.$refs.orgTree.getCurrentNode();
//
//                                    var index = children.fin           var parent = orgManager.getNodeByKey(node.supbak);
//                                    var children = parent.children || parent;
//                                    console.log(children);dIndex(d => d.id === node.id);
//                                    children.splice(index, 1,resData.t);
                                    //                            }
                                    //orgManager.$message.success("操作成功！");
                                    layer.msg("操作成功！", {icon: 6});
                                } else {
                                    layer.msg(resData.msg, {icon: 5});
                                }
                            });
                        } else {
                            layer.msg("表单验证失败，请检查!", {icon: 5});
                            return false;
                        }
                    }

                );
            }

        },
        watch: {
            filterText:function(val) {
                this.$refs.orgTree.filter(val);
            }
        },
        created:function(){
            var url = '${basePath}bank/org/getOrgTree';
            var options = {};
            sendService(url, options, function (resData) {
                layer.close(loadOrg);
                if (resData.status == 'success') {

                    orgManager.treeData = resData.t;
                } else {
                    orgManager.$message.error("机构树加载失败");
                }
            });
        }
    });
</script>

<style scoped>
    .org_manager .table_search{
        border-top: 20px solid #f8f9fb;
        height: 80px;
    }
    .table_search, .table_btn{
        height: 60px;
        margin-bottom: 10px;
        background: #fff;
        padding: 10px 20px 30px;
    }
    .el-input{
        width: auto;
    }
    .text-r{
        text-align: left;
    }
    .footerBox {
        width: 100%;
        height: 50px;
        background-color: #fff;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding-top: 9px;
        text-align: right;
    }
    .cla_409EFF{
        color: #409EFF;
    }
    .cla_5a5e66{
        color: #5a5e66;
    }

    .main-right{
        overflow-x: hidden;
    }
    html,body{
        overflow-x: hidden;
    }
</style>
